<template>
  <div class="dashboard">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span>待领养宠物</span>
              <el-tag type="success">实时</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="number">28</div>
            <div class="compare">
              <span>同比上月</span>
              <span class="up">↑12.5%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span>本月领养数</span>
              <el-tag type="warning">月度</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="number">158</div>
            <div class="compare">
              <span>月同比</span>
              <span class="down">↓8%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span>待处理申请</span>
              <el-tag type="danger">紧急</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="number">12</div>
            <div class="compare">
              <span>日同比</span>
              <span class="up">↑25%</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="data-card">
          <template #header>
            <div class="card-header">
              <span>系统用户数</span>
              <el-tag>总计</el-tag>
            </div>
          </template>
          <div class="card-content">
            <div class="number">1,286</div>
            <div class="compare">
              <span>年同比</span>
              <span class="up">↑32%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新动态和待办事项 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card class="latest-news">
          <template #header>
            <div class="card-header">
              <span>最新动态</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
              :type="activity.type"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="todo-list">
          <template #header>
            <div class="card-header">
              <span>待办事项</span>
              <el-button type="primary" link>查看全部</el-button>
            </div>
          </template>
          <el-table :data="todoList" style="width: 100%">
            <el-table-column prop="title" label="事项" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === '待处理' ? 'danger' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activities = ref([
  {
    content: '王小明提交了新的领养申请',
    timestamp: '2024-03-18 10:30:00',
    type: 'primary'
  },
  {
    content: '系统更新了宠物健康检查记录',
    timestamp: '2024-03-18 09:15:00',
    type: 'success'
  },
  {
    content: '新增3只流浪猫信息',
    timestamp: '2024-03-18 08:20:00',
    type: 'info'
  },
  {
    content: '完成了5份领养回访记录',
    timestamp: '2024-03-17 17:45:00',
    type: 'warning'
  }
])

const todoList = ref([
  {
    title: '待审核领养申请',
    status: '待处理'
  },
  {
    title: '宠物健康检查',
    status: '进行中'
  },
  {
    title: '回访跟进',
    status: '待处理'
  },
  {
    title: '系统数据备份',
    status: '进行中'
  }
])
</script>

<style scoped>
.dashboard {
  width: 100%;
}

.mt-20 {
  margin-top: 20px;
}

.data-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-card .card-content .number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.data-card .card-content .compare {
  font-size: 12px;
  color: #666;
}

.data-card .card-content .compare .up {
  color: #67c23a;
  margin-left: 8px;
}

.data-card .card-content .compare .down {
  color: #f56c6c;
  margin-left: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.latest-news {
  height: 400px;
  overflow-y: auto;
}

.todo-list {
  height: 400px;
}
</style> 